
import { useState } from "react"
export default function ContentItem({ delVal, data, changeCompeted, watchFunChange, updataInfoIsShow }) {
  // 删除前设置确认
  function preDel() {
    delVal(data._id)
  }

  const [isTrue, setIsTrue] = useState(false)

  // 鼠标滑过添加背景色
  const addBckColor = (isOk) => {
    setIsTrue(isOk)
  }

  return (
    <div className={["contentItem", isTrue ? 'active' : ""].join(" ")} onMouseEnter={() => { addBckColor(true) }} onMouseLeave={() => { addBckColor(false) }} >
      <div className="left">
        <input onChange={() => { changeCompeted(data._id) }} type="checkbox" checked={data.note_done} />
        <span
          style={{ textDecoration: data.note_done ? "line-through" : "none" }}
        >
          {data.note_content}
        </span>
      </div>
      <div className="btn-con">
        <button className="primary" onClick={() => { watchFunChange(data._id) }}>查看</button>
        <button className="warning" onClick={() => { updataInfoIsShow(data._id) }}>编辑</button>
        <button onClick={preDel} className="danger">删除</button>
      </div>
    </div>
  );
}
